<template>
    <ul class="m-menutabs">
        <li v-for="(item,index) in menutab" :key="index" 
        @click="setTab(index)"
        :class="{'active':idx==index}">
            {{item}}
        </li>
    </ul>
</template>
<script>
export default {
    name:'',
    props:['menutab'],
    data () {
        return {
            idx:0,
        }
    },
    methods:{
        setTab(index) {
            this.idx = index;
            this.$emit('setMenutab',index);
        }
    },
    mounted() {
        console.log(this.menutab);
    }
}
</script>
<style lang="less" scoped>
.m-menutabs{
    .flex;
    background: white;
    line-height: 2.4rem;
    li{
        flex:1;
        text-align: center;
        position: relative;
        &.active{
            color: @primary-green;
        }
        &.active::after{
            position: absolute;
            content: '';
            bottom: 0;
            width: 30%;
            left: 35%;
            z-index: 2;
            height: .1rem;
            background: @primary-green;
        }
    }
}
</style>
